<script setup lang="ts">
import { onMounted, nextTick, onBeforeMount, reactive } from "vue";
import ChatItem from "./ChatItem.vue";
import ChatSearch from "./ChatSearch.vue";
import { useChatStore } from "../../../store/useChatStore";
let dbData= reactive([])
let store = useChatStore()
onBeforeMount(async ()=>{

})
onMounted(async () => {
  let dbDatas = await store.dbData
  dbDatas.forEach((res) => {
    dbData.push(res)
  })
});
</script>
<template>
  <div class="ChatList">
    <ChatSearch />
    {{dbData.length}}
    <div class="ListBox"><ChatItem :data="item" v-for="item in dbData" :key="item.id" /></div>
  </div>
</template>
<style scoped lang="scss">
.ChatList {
  width: 250px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.ListBox {
  background: rgb(230, 229, 229);
  background-image: linear-gradient(to bottom right, rgb(235, 234, 233), rgb(240, 240, 240));
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;

  border-right: 1px solid rgb(214, 214, 214);
}
</style>
